<template>
  <page-header-one :scrollTop="scrollTop" :menuCheck="1"></page-header-one>

  <div class="container bgAnimate-data">
    <div class="container-top flex-center flex-column flex-align-items-center">
      <div class="flex flex-align-items-center font-38-B">
        Fatohot<span class="font-42-B">VIP</span>会员
      </div>
      <p class="font-18-B">让海外红人营销更简单</p>
    </div>

    <div class="main">
      <div class="main-top flex-between">
        <div class="main-desc flex flex-align-items-center font-16-B">
          按年付费
          <span class="font-10">限时优惠</span>
        </div>
        <div class="main-top-vips flex-between">
          <div v-for="(item, index) in vipList" :key="index"
            class="main-top-vip flex-center flex-column flex-align-items-center">
            <img src="@/assets/icon-member.png">
            <p class="main-top-vip-name font-16-B">{{ item.name }}</p>
            <p class="main-top-vip-price font-12-B flex flex-align-items-center">￥<span class="font-38-B">{{ item.price
            }}</span>/年</p>
            <p class="main-top-vip-btn font-16-B pointer">立即咨询</p>
          </div>
        </div>
      </div>
      <div class="main-info">
        <div v-for="(item, index) in data.vipTextArr" :key="index" class="flex-between flex-align-items-center"
          :class="{ 'main-info-title': !item.key, 'main-info-attr': item.key }">
          <p class="main-info-attr-name" :class="{ 'font-18-B': !item.key, 'font-16': item.key }">{{ item.name }}</p>
          <div class="flex-between">
            <p v-for="(vipItem, vipIndex) in vipList" :key="vipIndex" class="flex-center flex-align-items-center">
              <i v-if="vipItem[item.key] === true" class="iconfont icon-duigou"></i>
              <i v-else-if="vipItem[item.key] === false" class="iconfont icon-cha"></i>
              <span v-else class="font-16">{{ vipItem[item.key] }}{{ item.suffix ? item.suffix : '' }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="vip-flag">
      <img src="@/assets/img-vip-1.png">
      <div class="vip-flag-main flex-between flex-align-items-center">
        <div class="vip-flag-main-text">
          <p class="font-20-B">让海外红人营销更简单</p>
          <p class="font-16 pointer">加入我们，带你了解海外新知识 ></p>
        </div>
        <div class="vip-flag-main-btn font-16-B pointer" @click="toPath('/')">体验FOTO时代</div>
      </div>
    </div>

    <div class="vip-light flex-between">
      <div class="vip-light-item flex-center flex-column flex-align-items-center">
        <i class="iconfont icon-kefu1"></i>
        <p class="font-18-B">专业服务化</p>
        <p class="font-14-B">24小时全程为您保驾护航，解决您的困扰</p>
        <div class="font-14-B pointer">联系我们</div>
      </div>
      <div class="vip-light-item flex-center flex-column flex-align-items-center">
        <i class="iconfont icon-shuju"></i>
        <p class="font-18-B">数据定制化</p>
        <p class="font-14-B">定制您想要的网红数据以及深度分析报告</p>
        <div class="font-14-B pointer">联系我们</div>
      </div>
    </div>

    <div class="vip-foot flex flex-column flex-align-items-center">
      <span class="font-80-B">90% +</span>
      <span class="font-24-B">购买VIP年度会员的用户选择续费</span>
      <img src="@/assets/img-vip-foot.png">
    </div>

    <div class="to-top font-20-B pointer" @click="scrollToTop">值得拥有</div>
  </div>

  <page-footer-one></page-footer-one>
</template>

<script setup>
import PageHeaderOne from '@/components/pageHeaderOne.vue';
import PageFooterOne from '@/components/pageFooterOne.vue';
import { ref } from 'vue';
import data from '@/js/data.js';
import { useRouter } from 'vue-router';

const router = useRouter()

const scrollTop = ref(0);
const vipList = ref([
  {
    name: '专业版',
    price: 18888,
    peopleCount: '2000万+',
    campaign: true,
    channelBaseCount: 3000,
    channelDepthCount: 3000,
    priceEstimate: true,
    collectCount: '不限',
    collectCapacity: '不限',
    distribution: true,
    accurateSearch: true,
    comprehensiveSearch: true,
    competitorsSearch: true,
    searchResult: '不限',
    marketingSystem: true,
    massProduction: true,
    dailyContactCount: '不限',
    sendEmailCount: 5000,
    customEmailTemplate: true,
    customEmailDomainName: false,
    orderTask: 10,
    invitation: true,
    AIPush: false,
    topRecommend: false,
    brand: 20,
    ranking: true,
    sourceMaterial: true,
    script: true,
    schedule: true,
    link: true,
    monitor: true,
    accompanyingRunning: false,
    commissioner: false,
    bulletinBoard: true,
    subAccount: 1,
    train: true,
    sever: '专业客户服务群'
  },
  {
    name: '高级专业版',
    price: 28888,
    peopleCount: '2000万+',
    campaign: true,
    channelBaseCount: 6000,
    channelDepthCount: 6000,
    priceEstimate: true,
    collectCount: '不限',
    collectCapacity: '不限',
    distribution: true,
    accurateSearch: true,
    comprehensiveSearch: true,
    competitorsSearch: true,
    searchResult: '不限',
    marketingSystem: true,
    massProduction: true,
    dailyContactCount: '不限',
    sendEmailCount: 15000,
    customEmailTemplate: true,
    customEmailDomainName: true,
    orderTask: 12,
    invitation: true,
    AIPush: true,
    topRecommend: true,
    brand: 50,
    ranking: true,
    sourceMaterial: true,
    script: true,
    schedule: true,
    link: true,
    monitor: true,
    accompanyingRunning: false,
    commissioner: false,
    bulletinBoard: true,
    subAccount: 3,
    train: true,
    sever: 'VIP客户服务群'
  },
  {
    name: '企业版',
    price: 48888,
    peopleCount: '2000万+',
    campaign: true,
    channelBaseCount: 10000,
    channelDepthCount: 10000,
    priceEstimate: true,
    collectCount: '不限',
    collectCapacity: '不限',
    distribution: true,
    accurateSearch: true,
    comprehensiveSearch: true,
    competitorsSearch: true,
    searchResult: '不限',
    marketingSystem: true,
    massProduction: true,
    dailyContactCount: '不限',
    sendEmailCount: 50000,
    customEmailTemplate: true,
    customEmailDomainName: true,
    orderTask: 15,
    invitation: true,
    AIPush: true,
    topRecommend: true,
    brand: 100,
    ranking: true,
    sourceMaterial: true,
    script: true,
    schedule: true,
    link: true,
    monitor: true,
    accompanyingRunning: true,
    commissioner: '1人(周)',
    bulletinBoard: true,
    subAccount: 10,
    train: true,
    sever: 'VIP高级客户服务群'
  }
]);

const toPath = path => {
  router.push(path);
}
//回到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
}
</script>

<style lang="less" scoped>
.container {
  padding-top: 148px;
  background-image: url(@/assets/bg-vip.png);
  background-repeat: no-repeat;
  animation: bgAnimate-data 20s infinite;

  .container-top {
    padding-bottom: 112px;

    div {
      margin-bottom: 24px;

      span {
        width: 112px;
        height: 64px;
        background: linear-gradient(90deg, #ff5277 2%, rgba(255, 193, 206, .49));
        border-radius: 39px 32px 32px 6px;
        text-align: center;
        line-height: 64px;
        margin: 0 10px;
        color: #fff;
      }
    }

    p {
      color: #999;
    }
  }

  .main {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-top: 36px;

    .main-top {
      margin-bottom: 32px;

      .main-desc {
        position: relative;
        width: 282px;
        height: 40px;
        margin-top: 37px;
        margin-right: 72px;
        padding: 0 22px;
        background: rgba(255, 82, 119, .04);
        color: #333;

        &::before {
          content: "";
          width: 6px;
          height: 40px;
          background: @main-color;
          position: absolute;
          top: 0;
          left: 0;
        }

        span {
          width: 72px;
          height: 20px;
          margin-left: 24px;
          background: #ffeeed;
          border: 1px solid @main-color;
          border-radius: 11px;
          color: @main-color;
          text-align: center;
          line-height: 20px;
        }
      }

      .main-top-vips {
        width: 846px;
        height: 255px;

        .main-top-vip {
          width: 266px;

          &:hover {
            &::after {
              content: "";
              position: absolute;
              top: 0;
              z-index: 10;
              width: 266px;
              height: 100%;
              background: rgba(255, 82, 119, .04);
              border: 2px solid @main-color;
              border-radius: 16px;
              pointer-events: none;
            }

            &:nth-child(1) {
              left: 354px;
            }

            &:nth-child(2) {
              right: 438px;
            }

            &:nth-child(3) {
              right: 0;
            }
          }

          img {
            width: 20px;
            margin-bottom: 12px;
          }

          .main-top-vip-name {
            margin-bottom: 20px;
          }

          .main-top-vip-price {
            color: @main-color;
            margin-bottom: 50px;
          }

          .main-top-vip-btn {
            width: 176px;
            height: 40px;
            background: @main-color;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            transition: all .3s;

            &:hover {
              background: #ff89a3;
            }
          }
        }
      }
    }

    .main-info {
      padding-bottom: 60px;
      margin-bottom: 40px;

      .main-info-title {
        height: 42px;
        border-bottom: 1px solid #dcdee0;
        margin-top: 32px;

        &:first-child {
          margin-top: 0;
        }

        p {
          color: #333;
        }
      }

      .main-info-attr {
        height: 56px;
        border-bottom: 1px dashed #dcdee0;
        padding-left: 24px;

        .main-info-attr-name {
          color: #333;
        }

        div {
          width: 846px;

          p {
            width: 266px;

            .icon-duigou {
              color: #2ec993;
            }

            .icon-cha {
              color: @main-color;
            }

            span {
              color: #333;
            }
          }
        }
      }
    }
  }

  .vip-flag {
    position: relative;
    margin: 0 auto 100px;
    width: 1200px;
    padding-top: 121px;

    img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 280px;
    }

    .vip-flag-main {
      height: 124px;
      background: #f4f5f7;
      padding: 0 42px 0 280px;

      .vip-flag-main-text {
        p {
          &:first-child {
            color: #333;
            margin-bottom: 12px;
          }

          &:last-child {
            color: @main-color;
          }
        }
      }

      .vip-flag-main-btn {
        width: 174px;
        height: 40px;
        background: @main-color;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    }
  }

  .vip-light {
    margin: 0 auto 100px;
    width: 1200px;

    .vip-light-item {
      width: 590px;
      height: 320px;
      background-size: cover;


      &:first-child {
        background: url(@/assets/img-vip-2.png) no-repeat;
      }

      &:last-child {
        background: url(@/assets/img-vip-3.png) no-repeat;
      }

      i {
        font-size: 40px;
        margin-bottom: 18px;
        color: #fff;
      }

      p {
        color: #fff;
        padding-bottom: 12px;
      }

      div {
        width: 174px;
        height: 40px;
        background: @main-color;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        margin-top: 40px;
      }
    }
  }

  .vip-foot {
    width: 100%;
    height: 583px;
    margin-bottom: 54px;
    background: linear-gradient(90deg, rgba(235, 232, 252, .24), rgba(215, 210, 255, .6) 46%, rgba(235, 232, 252, .24));
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    z-index: 10;
    padding-top: 175px;

    span {
      color: #333;

      &:first-child {
        margin-bottom: 8px;
      }
    }

    img {
      width: 1041px;
      height: 483px;
      position: absolute;
      top: 11px;
      animation: Rotate-data 10s linear infinite;
    }
  }

  .to-top {
    width: 180px;
    height: 48px;
    background: @main-color;
    border-radius: 24px;
    color: #fff;
    text-align: center;
    line-height: 48px;
    margin: 0 auto 50px;
  }
}

@keyframes bgAnimate-data {
  0% {
    background-position: 0 0;
  }

  25% {
    background-position: 45px -45px;
  }

  50% {
    background-position: 60px 60px;
  }

  75% {
    background-position: -70px 70px;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes Rotate-data {
  0% {
    transform: rotate(0) scale(1);
    filter: blur(0);
  }

  25% {
    transform: rotate(5deg) scale(.95);
    filter: blur(3px);
  }

  50% {
    transform: rotate(0) scale(1);
    filter: blur(0);
  }

  75% {
    transform: rotate(-5deg) scale(.95);
    filter: blur(3px);
  }

  100% {
    transform: rotate(0) scale(1);
    filter: blur(0);
  }
}
</style>
